import React from 'react'
import { Button } from 'antd'
import PropTypes from 'prop-types' // 属性类型检查


import { graphqlAPI } from '../service/auth'

// 类组件
// 生命周期：mounting（挂载）：已插入真实dom
// updating(更新)：正在被重新渲染
// unmounting（卸载）：已移出真实dom

// class写法
class Expert extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      date: new Date(),
      count: 0
    }
    this.ulRef = React.createRef()
  }

  async componentDidMount() {
    // 定时更新时间
    // this.timerID = setInterval(() => {
    //   this.setState({date: new Date()})
    // }, 1000)
    let params = {
      operationName: "GetSalarySuggestionByRoleAndLocation",
      query: "query GetSalarySuggestionByRoleAndLocation($role_id: ID!, $roleTitle: String!, $locationId: Int, $salaryType: String) {\n  salarySuggestionByRoleIdAndLocationId(\n    role_id: $role_id\n    roleTitle: $roleTitle\n    locationId: $locationId\n    salaryType: $salaryType\n  ) {\n    roleId\n    roleTitle\n    locationId\n    locationName\n    suggestion\n    salary_median\n    salary_max\n    salary_min\n    in_months\n    __typename\n  }\n}",
      variables: {
        locationId:1000165,
        roleTitle: "Web Developer",
        role_id: "web-developer"
      }
    }
    const res = await graphqlAPI(params)
    console.log(res)
  }

  componentDidUpdate() {
    let li = document.createElement('li')
    li.innerText = `组件更新时间${new Date().toLocaleString()}`
    this.ulRef.current.appendChild(li)
  }

  setCount(count) {
    this.setState({count})
  }

  componentWillUnmount() {
    clearInterval(this.timerID)
  }

  render() {
    return (
      <div>
        <h2>当前时间：{this.state.date.toLocaleTimeString()}</h2>
        <p style={{marginTop: 10}}>您点击了{this.state.count} 次</p>
        <Button style={{marginTop: 10}} variant="outlined" onClick={() => {this.setCount(this.state.count + 1)}}>递增</Button>
        <Button style={{marginTop: 10, marginLeft: 10}} variant="outlined" onClick={() => {this.setCount(this.state.count - 1)}}>递减</Button>
        {/* 两种形式，回调函数形式，字符串形式如：'ref="ulRef"'(字符串形式官方不推荐) */}
        <ul style={{marginTop: 10}} ref={this.ulRef}></ul>
      </div>
    )
  }

}
export default Expert

// 属性类型检查
Expert.propTypes = {
  count: PropTypes.number
}